<template>
  <div ref="refDiagnosePage" class="page">
    <div ref="refDiagnoseSalon" :class="{ fixed: isSalonTitleFixed }">
      <div v-if="diagnoseItem['2'].salonNo" class="diagnose_salon_info">
        <div>
          <span class="info_name">门店名称:</span>
          <span class="info_value">{{ diagnoseItem['2'].salonName }}</span>
        </div>
        <div>
          <span class="info_name">复盘单号:</span>
          <span class="info_value">{{ diagnoseItem['2'].diagnoseNo }}</span>
        </div>
        <div>
          <span class="info_name">履约起止日期:</span>
          <span class="info_value">{{ diagnoseItem['2'].performPeriod }}</span>
        </div>
        <div style="margin-left: 30px">
          <el-link type="success" style="margin-right: 5px" @click.stop.native="handleShowTimeline">
            查看复盘时间线
          </el-link>
        </div>
        <div style="margin-left: 30px; place-self: flex-end">
          <el-link type="danger" style="margin-right: 5px" @click.stop.native="handleClosePage">关闭详情页面</el-link>
        </div>
      </div>
      <el-alert v-else :title="'请先完填写或者选择基础信息'" type="warning" :closable="false"></el-alert>
    </div>
    <div v-for="option in availableDiagnose" :key="option.id" class="context">
      <div class="title_1" style="cursor: pointer" @click.stop="handleClickDiagnoseCategories(option.id)">
        {{ option.name }}
        <span v-if="option.id === '2'"></span>
        <span v-else>
          <i v-if="diagnoseItem[option.id].dataLoading" class="el-icon-loading"></i>
          <i v-else-if="diagnoseVisible[option.id]" class="el-icon-arrow-down"></i>
          <i v-else class="el-icon-arrow-right"></i>
        </span>
      </div>
      <div v-if="diagnoseVisible[option.id]" class="title_1_ctx2">
        <component :is="'diagnose' + option.id" :ref="'refDiagnose' + option.id" :style="'width: 100%'"></component>
      </div>
    </div>

    <el-drawer :visible.sync="pop.timeline.showMe" :with-header="false" direction="rtl" size="30%">
      <diag-timeline ref="refDiagTimeline"></diag-timeline>
    </el-drawer>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { checkMarkDiagnose } from '@/api/diagnose';
// 引入自定义组件
import '@/utils/datefmt';
import Diagnose1 from './pop/diagnose1.vue';
import Diagnose10 from './pop/diagnose10.vue';
import Diagnose11 from './pop/diagnose11.vue';
import Diagnose2 from './pop/diagnose2.vue';
import Diagnose3 from './pop/diagnose3.vue';
import Diagnose4 from './pop/diagnose4.vue';
import Diagnose5 from './pop/diagnose5.vue';
import Diagnose6 from './pop/diagnose6.vue';
import Diagnose7 from './pop/diagnose7.vue';
import Diagnose8 from './pop/diagnose8.vue';
import Diagnose9 from './pop/diagnose9.vue';
import DiagTimeline from './pop/timeline.vue';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

const ReviewOptions = [
  { id: '1', name: '综合打分' },
  { id: '2', name: '基础信息' },
  { id: '3', name: '【基本盘】业绩' },
  { id: '4', name: '【基本盘】老客数据' },
  { id: '5', name: '【一阶】人力数据' },
  { id: '6', name: '【一阶】客户运营' },
  { id: '7', name: '【二阶】产品数据' },
  { id: '8', name: '【二阶】制度' },
  { id: '9', name: '【三阶】成本' },
  { id: '10', name: '【三阶】新客数据' },
  { id: '11', name: '【三阶】合规性（迎检）' },
];

export default {
  name: 'Diagnose',
  components: {
    ['diagnose1']: Diagnose1,
    ['diagnose2']: Diagnose2,
    ['diagnose3']: Diagnose3,
    ['diagnose4']: Diagnose4,
    ['diagnose5']: Diagnose5,
    ['diagnose6']: Diagnose6,
    ['diagnose7']: Diagnose7,
    ['diagnose8']: Diagnose8,
    ['diagnose9']: Diagnose9,
    ['diagnose10']: Diagnose10,
    ['diagnose11']: Diagnose11,
    ['diag-timeline']: DiagTimeline,
  },
  data() {
    return {
      isSalonTitleFixed: false,
      diagnosePageTop: undefined,
      availableDiagnose: [],
      diagnoseVisible: {},
      diagnoseItem: {
        // 统筹管理所有诊断项目, key 是 ReviewOptions.id
        1: {},
        2: {},
        3: {},
        4: {},
        5: {},
        6: {},
        7: {},
        8: {},
        9: {},
        10: {},
        11: {},
      },
      pop: {
        timeline: {
          showMe: false,
        },
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  created() {
    ReviewOptions.forEach(x => {
      this.$set(this.diagnoseVisible, x.id, x.id == '2');
    });
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll);
    this.diagnosePageTop = this.$refs.refDiagnosePage.offsetTop;
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll);
  },
  methods: {
    doGatherTabs() {
      ReviewOptions.forEach(x => {
        this.$set(this.diagnoseVisible, x.id, x.id == '2');
      });
    },
    handleClosePage() {
      this.$emit('closed', 'closed');
    },
    handleScroll() {
      const scrollTop = window.scrollY || document.documentElement.scrollTop;
      this.isSalonTitleFixed = scrollTop > this.diagnosePageTop;
    },
    handleShowTimeline: async function () {
      this.pop.timeline.showMe = true;
      await this.$nextTick();
      this.$refs.refDiagTimeline.loadDiagnoseData(this.diagnoseItem['2']);
    },
    handleClickDiagnoseCategories: async function (id) {
      const selectedIdx = this.availableDiagnose.findIndex(x => x.id === id);
      if (selectedIdx === undefined) {
        return;
      }
      if (id == '2') {
        return;
      }
      if (!this.diagnoseItem['2'].salonId) {
        MessageBox.alert('门店不存在');
        return;
      }
      const preState = this.diagnoseVisible[id];
      this.$set(this.diagnoseVisible, id, !preState);
      if (!preState) {
        await this.$nextTick();
        this.loadDiagnoseCategoryData(id);
      }
    },
    loadDiagnoseCategoryData: async function (id) {
      // 每个标签页的数据初始化方法, 都是 loadDiagnoseData
      const refName = `refDiagnose${id}`;
      const refChildren = this.$refs[refName];
      if (refChildren && refChildren.length) {
        const refTab = refChildren[0];
        refTab.loadDiagnoseData(this.diagnoseItem['2']);
      }
    },
    loadDiagnoseData: async function (baseDiagnose) {
      if (!baseDiagnose || !baseDiagnose.diagnoseNo) {
        return;
      }
      this.diagnoseItem['2'] = Object.assign({}, baseDiagnose);
      this.loadDiasnosed();
    },
    /**
     * 只显示做过复盘的模块
     */
    loadDiasnosed: async function () {
      const errAlertMsg = '查询复盘项目失败';
      await checkMarkDiagnose(this.diagnoseItem['2'].diagnoseNo)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          const ret = res.data.data;
          if (ret) {
            ReviewOptions.forEach(x => {
              const diagnoseKey = `diagnose${x.id}`;
              if (x.id == 2 /* 基本信息必须显示 */ || ret[diagnoseKey] == 1) {
                this.availableDiagnose.push(x);
              }
            });
          }
        })
        .catch(err => {
          console.log('checkMarkDiagnose', err);
          MessageBox.alert(errAlertMsg);
        });

      await this.$nextTick();
      this.loadDiagnoseCategoryData('2');
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/salonmodel.scss';

::v-deep .el-table td {
  padding: 5px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
}

.page {
  @extend .salon_model_context_1;
  position: relative;
  width: 100%;
  height: auto;
  padding: 5px 10px 0 10px;
  border-radius: 0px 0px 0px 0px;

  .diagnose_salon_info {
    width: 100%;
    padding: 10px;
    background-color: #f1f1f1;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;

    .info_name {
      font-weight: 500;
    }

    .info_value {
      margin: 0 0 0 5px;
      color: rgb(64, 158, 255);
      background-color: #f2f2f2;
    }
  }

  .fixed {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    transition: all 0.3s; /* 添加动画过渡（可选） */
  }

  .context {
    width: 100%;
    padding: 5px 10px 20px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
  }

  .title_1 {
    @extend .salon_model_title_1;
    letter-spacing: 0px;
    font-variation-settings: 'opsz' auto;
    letter-spacing: 1px;
  }

  .title_1_ctx2 {
    width: 100%;
    padding: 0px 0px 0px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
  }
}
</style>
